import React,{useEffect,useState,useRef} from 'react'
import {useLocation} from 'react-router-dom'
import { Carousel } from 'antd';
import * as echarts from 'echarts';
import '@/assets/less/home.less'
import Histogram from '@/component/Charts/Histogram'
import { getAllLoginInfo, getAllgoods, userInfoApi } from '@/request/index'
import { getCarApi } from '@/request/datamanagment'
import axios from 'axios';
function Home() {
  const [slideshow, setSlideshow] = useState([])          //轮播图
  const [userTotal, setUserTotal] = useState(0)           //用户总数
  const [activeCount, setActiveCount] = useState(0)       //活跃数
  const [noLoginCount, setNoLoginCount] = useState(0)     //未登陆数
  const [vehicle, setVehicle] = useState([])     //未登陆数
  const [options, setOptions] = useState({})
  useEffect(()=>{
    getSlideshow()
    getAllUser()

  },[])

  useEffect(()=>{
    drawLine()
  }, [userTotal])

  /* 获取轮播图数据 */
  const getSlideshow = ()=>{
    getCarApi().then(res=>{
      setSlideshow(res.data.slice(0,10))
      getdataMonth(res.data)
    })
  }

  /* 获取近一个月的数据 */
  let getdataMonth = (data)=>{
    let vehicleTime = [];
    let timeCount = [];
    let timedata = data.map(item => {
      let time = item.entry_time.split(/[" ",-]/)
      item.entry_time = time.slice(1, 3).join("-")
      return item
    })

    for (const item of timedata) {
      if (vehicleTime.indexOf(item.entry_time) === -1) {
        vehicleTime.push(item.entry_time)
        timeCount.push({
          type: item.entry_time,
          count: 1
        })
      } else {
        for (const time of timeCount) {
          if (item.entry_time.includes(time['type'])) {
            time['count']++ //该时间的数量+1
          }
        }
      }
    }
    setVehicle(timeCount)
  }
  const getAllUser = () => {
    axios.all([
      userInfoApi(),
      getAllLoginInfo()
    ]).then(res=>{
      setUserTotal(res[0].data.length)
      setActiveCount(res[1].data.length)
      setNoLoginCount(res[0].data.length - res[1].data.length)
      })
  }
  function drawLine() {
    let timedata = vehicle.splice(0, 30).reverse()
    let time = timedata.map(item => item.type)
    let count = timedata.map(item => item.count)
    // 基于准备好的dom，初始化echarts实例
    // let myChart = echarts.init(document.getElementById('bottom_content'))
    // // 绘制图表
    // myChart.setOption();
    let options = {
      tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
          type: 'line' // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      xAxis: [{
        type: 'category',
        data: time,
        axisTick: {
          alignWithLabel: true
        },
        axisLine: { //这是x轴文字颜色
          lineStyle: {
            color: "black", fontStyle: "bold"
          }
        },
        axisLabel: { interval: 0, rotate: 40 },

      }],
      yAxis: [{
        type: 'value',
        axisLine: { //这是x轴文字颜色
          lineStyle: {
            color: "balck",
            fontStyle: "bold"
          }
        }
      }],
      series: [{
        type: 'bar',
        data: count,
        barWidth: 20,
        itemStyle: {
          normal: {
            color: '#FD6B71', //设置柱子颜色
            label: {
              show: true, //柱子上显示值
              position: 'top', //值在柱子上方显示
              textStyle: {
                color: '#fff' //值得颜色
              }
            }
          }
        }
      }]
    }
    setOptions(options)
  }

  return (
    <div className='home'>
      <div className='top'>
        <div className='left_box'>
          <div className='today_new'>
            <div className='today_new_box'>
              <span>今日新增</span>
              <span>20条</span>
            </div>
            <div>较昨日+3条</div>
          </div>
          <div className='month_new'>
            <div className='month_new_box'>
              <span>本月新增</span>
              <span>100条</span>
            </div>
            <div>较上月+56条</div>
          </div>
        </div>
        <div className='middle_box'>
          <Carousel autoplay style={{width:"837px", height:"284px"}}>
            {
              slideshow ?
              slideshow.map((item,index)=>{
                return(
                  <div key={index}>
                    <img src={item.vehicle_img} alt="" style={{ width: "837px", height:"284px",backgroundSize:"100% 100%"}}/>
                  </div>
                )
              })
              :""
            }
          </Carousel>
        </div>
        <div className='right_box'>
          <p>系统用户统计</p>
          <p>用户总数:{userTotal }</p>
          <p>近7天活跃数:{activeCount }</p>
          <p>未登陆的用户数: {noLoginCount}</p>
        </div>
      </div>
      <div className='bottom'>
        <div id="bottom_content">
          <Histogram  options={options} height="300"></Histogram>
        </div>
      </div>
    </div>
  )
}

export default Home
